<template>
  <div class="modal fade" id="premisesListModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="self-modal-dialog" style="width: 80vw; margin-top:50px; margin-left: 10vw">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" @click="closeModal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
          <h2 class="modal-title text-center">楼盘权限
            <font color="red">(该人员需开启相应角色权限后,即可查看其所驻场的楼盘和报备数据)</font>
          </h2>
        </div>
        <div class="modal-body">
          <div class="main-content">
            <div class="row">
              <div class="col-sm-12 col-md-12">
                <div class="screen-frame clearfix">
                  <div class="col-md-6 col-lg-6">
                    <div class="form-horizontal">
                      <div class="form-group">
                        <label class="col-md-3 col-sm-2 control-label">省份市区:</label>
                        <div class="col-md-9 col-sm-10">
                          <select class="form-control" style="width:32%;float:left" v-model="params.province" v-on:change="getCity()">
                            <option value="">全部</option>
                            <option v-for="(province,index) in province_list" :value="province.id" :key="index">{{province.name}}</option>
                          </select>
                          <span style="float:left">-</span>
                          <select class="form-control" style="width:32%;float:left" v-model="params.city" v-on:change="getArea()">
                            <option value="">全部</option>
                            <option v-for="(city,index) in city_list" :value="city.id" :key="index">{{city.name}}</option>
                          </select>
                          <span style="float:left">-</span>
                          <select class="form-control" style="width:32%;float:left" v-model="params.area">
                            <option value="">全部</option>
                            <option v-for="(area,index) in area_list" :value="area.id" :key="index">{{area.name}}</option>
                          </select>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="col-md-3 col-lg-3">
                    <div class="form-horizontal">
                      <div class="form-group">
                        <input type="text" class="form-control" placeholder="楼盘名称" v-model="params.premisesName">
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-lg-3">
                    <div class="form-horizontal">
                      <div class="form-group">
                        <button type="submit" class="btn screen-submit" style="position:static;margin-left:10px;background-color: #3399cc;" @click="premsiesList()">查询</button>
                        <button type="submit" class="btn screen-submit" style="position:static;margin-left:10px;background-color: #e96130;" @click="confirmChecked()">确定</button>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4 col-lg-4">
                    <div class="form-horizontal">
                      <div class="form-group">
                        <label class="col-md-4 col-sm-4 control-label">楼盘状态:</label>
                        <div class="col-md-8 col-sm-8">
                          <select class="form-control" style="float:left" v-model="params.premisesStatus">
                            <option value="">全部</option>
                            <option value="0">待审核</option>
                            <option value="1">审核通过</option>
                            <option value="2">审核不通过</option>
                          </select>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4 col-lg-4">
                    <div class="form-horizontal">
                      <div class="form-group">
                        <label class="col-md-4 col-sm-4 control-label">销售状态:</label>
                        <div class="col-md-8 col-sm-8">
                          <select class="form-control" style="float:left" v-model="params.saleStatus">
                            <option value="">全部</option>
                            <option value="0">待售</option>
                            <option value="1">在售</option>
                            <option value="2">售罄</option>
                            <option value="3">下架</option>
                          </select>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4 col-lg-4">
                    <div class="form-horizontal">
                      <div class="form-group">
                        <a @click="choosePremisesUserClick" class="col-md-4 col-sm-4 control-label" style="width:60%; text-decoration: underline; color: red;">将所选楼盘应用到其他人</a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="table-responsive tableHight">
                  <img src="../../../assets/images/sigh.svg" style="width: 18px;padding-bottom: 3px;">
                  <span class="tips">已选中 {{ selectPremisesIds.length }} 个楼盘</span>
                  <!-- <div style="margin: 5px;">
									<span class="premisesSpan" v-for="(item, index) in selectPremisesNames" :key="index">{{ item }}</span>
								</div> -->
                  <table class="table table-striped table-bordered min-width-790">
                    <thead>
                      <tr>
                        <th width="5%">
                          <input type="checkbox" :checked="allCheck" @change="selectChange" />
                        </th>
                        <th width="10%">省份</th>
                        <th width="10%">城市</th>
                        <th width="10%">地区</th>
                        <th width="30%">楼盘名称</th>
                        <th width="10%">楼盘状态</th>
                        <th width="10%">销售状态</th>
                        <th width="10%">项目经理</th>
                      </tr>
                    </thead>
                    <tbody ref="table">
                      <tr v-for="(row, index) in premisesList" :key="index">
                        <td><input type="checkbox" class="singleCheckbox" :value="row.id" v-model="selectPremisesIds" :data-id="row.id" :data-name="row.name" @change="singleSelectChange" /></td>
                        <td>{{row.provinceName}}</td>
                        <td>{{row.cityName}}</td>
                        <td>{{row.areaName}}</td>
                        <td style="text-align: left;">{{row.name}}</td>
                        <td>{{row.premisesStatusName}}</td>
                        <td>{{row.saleStatusName}}</td>
                        <td>{{row.manager}}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div id="laypage_premisesList"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="选择人员" ref="chooseDialog" width="940px" :visible.sync="choosePremisesUserVisible" :before-close="choosePremisesUserModalClose">
      <selfDeptUserTable @choosePremisesUserModalClose="choosePremisesUserModalClose" :bindPremisesIds="bindPremisesIds" ref="selfDept" v-if="choosePremisesUserVisible"></selfDeptUserTable>
    </el-dialog>
  </div>
</template>

<script>
import selfDeptUserTable from "./selfDeptUserTable.vue";
export default {
  data() {
    return {
      rows: [],
      params: {
        premisesName: "",
        province: "",
        city: "",
        area: "",
        companyUuid: sessionStorage.companyUuid || "",
        partnerId: 0,
        premisesStatus: "",
        saleStatus: "",
      },
      name: "",
      premisesList: [],
      selectPremisesIds: [],
      selectPremisesNames: [],
      province_list: [],
      city_list: [],
      area_list: [],
      allCheck: false,
      btnShow: true,
      choosePremisesUserVisible: false,
      bindPremisesIds: [],
    };
  },
  props: {
    bindPremisesInfo: [Object],
  },
  components: {
    selfDeptUserTable,
  },
  watch: {
    "bindPremisesInfo.partnerId": {
      handler: function(val, oldVal) {
        if (val) {
          this.params.partnerId = val;
          this.premsiesList();
          //this.initUnBindPremises();
        }
      },
      //深层监听，当位对象时，若设为true，属性变更时即可触发，若为false，属性无法监听到
      deep: true,
    },
  },
  mounted() {
    this.provinceList();
    // this.premsiesList();
  },
  methods: {
    closeModal() {
      this.params.premisesName = "";
      this.params.province = "";
      this.params.city = "";
      this.params.area = "";
      this.params.premisesStatus = "";
      this.params.saleStatus = "";
      this.selectPremisesIds = [];
      this.selectPremisesNames = [];
      this.$emit("closeModal");
      $("#premisesListModal").modal("hide");
    },
    initAllCheck() {
      var _self = this;
      let checkDom = _self.$refs.table.getElementsByClassName("singleCheckbox");
      let count = 0;
      for (var ii = 0; ii < checkDom.length; ii++) {
        if (checkDom[ii].checked) {
          count++;
        }
      }
      // if(count==10){
      // 	_self.allCheck = true;
      // }
    },
    selectChange(e) {
      var _self = this;
      var checked = e.target.checked;
      _self.allCheck = checked;
      let checkDom = _self.$refs.table.getElementsByClassName("singleCheckbox");
      // 获取当前页Dom
      // 选中状态: 添加选中值
      // 取消选中: 全部清空历史选中值
      for (var ii = 0; ii < checkDom.length; ii++) {
        checkDom[ii].checked = checked;
        var premisesId = checkDom[ii].dataset.id;
        var idIndex = _self.selectPremisesIds.indexOf(parseInt(premisesId));
        var premisesName = checkDom[ii].dataset.name;
        var nameIndex = _self.selectPremisesNames.indexOf(premisesName);
        // 选中要过滤掉重复
        if (checked) {
          if (idIndex < 0) {
            _self.selectPremisesIds.push(parseInt(premisesId));
          }
          if (nameIndex < 0) {
            _self.selectPremisesNames.push(premisesName);
          }
        } else {
          // 不选中要清除掉以选中数据
          if (idIndex >= 0) {
            _self.selectPremisesIds.splice(idIndex, 1);
          }
          if (nameIndex >= 0) {
            _self.selectPremisesNames.splice(nameIndex, 1);
          }
        }
      }
      _self.selectPremisesIds = Array.from(new Set(_self.selectPremisesIds));
      _self.selectPremisesNames = Array.from(
        new Set(_self.selectPremisesNames)
      );
    },
    singleSelectChange(e) {
      var _self = this;
      var checked = e.target.checked;
      var premisesName = e.target.dataset.name;
      if (!checked) {
        _self.allCheck = checked;
        var index = _self.selectPremisesNames.indexOf(premisesName);
        _self.selectPremisesNames.splice(index, 1);
      } else {
        _self.selectPremisesNames.push(premisesName);
      }
      _self.initAllCheck();
    },
    confirmChecked() {
      var _self = this;
      _self.getPremisesReturn();
      // _self.$emit("getPremisesListener", _self.selectPremisesIds)
      _self.closeModal();
    },
    getPremisesReturn() {
      var _self = this;
      if (!_self.btnShow) {
        layer.msg("请勿重复操作！");
        return;
      }
      //操作类型为新增时，将机构ID设为空,否则会执行修改操作
      var url = _self.utilHelper.apiUrl + "/api/bindPartnerToPremises";
      // var premisesIds = $("#premisesSelect").multipleSelect("getSelects");
      var params = {};
      params.premisesIds = _self.selectPremisesIds.toString();
      params.partnerId = _self.bindPremisesInfo.partnerId;
      var body = {};
      body.params = params;
      _self.btnShow = false;
      _self.$http.post(url, body).then(
        (response) => {
          var resData = response.body.resData;
          var result = resData.result;
          var resultMsg = "服务器忙,请刷新页面重试!";
          if ("1" == result) {
            resultMsg = "操作成功!";
          }
          //输出操作信息
          layer.msg(
            resultMsg,
            {
              time: 1000,
            },
            function() {
              //关闭弹出层
              _self.btnShow = true;
            }
          );
        },
        (response) => {
          layer.msg(
            "服务器忙,请刷新页面重试!",
            {
              time: 1000,
            },
            function() {
              //关闭弹出层
              _self.btnShow = true;
            }
          );
        }
      );
    },
    premsiesList() {
      var _self = this;
      //加载绑定的案场
      var url = _self.utilHelper.apiUrl + "/api/getBindPremises";
      var body = {};
      _self.params.partnerId = _self.bindPremisesInfo.partnerId;
      body.params = _self.params;
      if (!_self.params.partnerId) {
        layer.msg("被设置用户丢失,请刷新页面重试!", {
          time: 2000,
        });
        return;
      }
      _self.$http.post(url, body).then(
        (response) => {
          var resData = response.body.resData;
          _self.selectPremisesNames = [];
          _self.selectedPremises = resData.inPremisesList || [];
          _self.selectedPremises.forEach((item) => {
            item.checked = true;
            if (_self.selectPremisesIds.indexOf(item.id) < 0) {
              _self.selectPremisesNames.push(item.name);
              _self.selectPremisesIds.push(item.id);
            }
          });
          //加载未绑定的案场
          //放在此处是由于数据加载延迟问题.
          url = _self.utilHelper.apiUrl + "/api/getPartnerUnBindPremises";
          _self.$http.post(url, body).then(
            (response) => {
              var resData = response.body.resData.outPremisesList || [];
              _self.premisesList = _self.selectedPremises.concat(resData);
              _self.$nextTick(() => {
                _self.initAllCheck();
              });
            },
            (response) => {}
          );
        },
        (response) => {}
      );
    },
    provinceList: function() {
      var _self = this;
      var body = {};
      body.params = {};
      var url = _self.utilHelper.apiUrl + "/api/getProvince.do";
      _self.$http.post(url, body).then((response) => {
        var resData = response.body.resData;
        if (resData.result == "1") {
          _self.province_list = resData.areaList;
        }
      });
    },
    getCity: function() {
      var _self = this;
      var provinceId = _self.params.province;
      if (!provinceId) {
        provinceId = 0;
      }
      var body = {};
      body.params = {
        areaId: provinceId,
      };
      var url = _self.utilHelper.apiUrl + "/api/getCity.do";
      _self.$http.post(url, body).then((response) => {
        var resData = response.body.resData;
        if (
          resData.result == "1" ||
          (resData.areaList && resData.areaList.length > 0)
        ) {
          _self.city_list = resData.areaList;
          _self.params.city = "";
          _self.params.area = "";
          _self.premises_area_list = [];
        }
      });
    },
    getArea: function() {
      var _self = this;
      var cityId = _self.params.city;
      if (!cityId) {
        cityId = 0;
      }
      var body = {};
      body.params = {
        areaId: cityId,
      };
      var url = _self.utilHelper.apiUrl + "/api/getArea.do";
      _self.$http.post(url, body).then((response) => {
        var resData = response.body.resData;
        if (resData.result == "1") {
          _self.params.area = "";
          _self.area_list = resData.areaList;
        }
      });
    },
    choosePremisesUserClick: function() {
      let _self = this;
      _self.bindPremisesIds = _self.selectPremisesIds;
      _self.choosePremisesUserVisible = true;
    },
    choosePremisesUserModalClose() {
      this.choosePremisesUserVisible = false;
    },
  },
};
</script>
<style>
input[type="checkbox"] {
  width: 15px;
  height: 15px;
}
.premisesSpan {
  border: 1px solid;
  padding: 5px 5px;
  color: #fff;
  background-color: #f90;
  border-radius: 10px;
  margin: 5px 5px;
  display: inline-block;
}
#premisesListModal .tableHight {
  height: 400px !important;
}
#premisesListModal .control-labelTwo {
  padding-left: 5px !important;
  padding-right: 5px !important;
}
#premisesListModal .divLeft {
  float: left;
}
</style>
